<template>
  <el-menu @open="getCreatePl()" id="leftNav" default-active="0" class="el-menu-vertical-demo"
     text-color="#fff" active-text-color="#9F96F1">
     <img style="width: 80%;margin-left:7%;" src="../../public/logo.png" alt="">
    <!-- el-menu-item为左侧导航栏选项组件 -->
    <el-menu-item v-for="(item, i) in songList.optionNames" :key="i + 1086" :index="i + ''" @click="navigation(i)">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="songList.icons[i]"></use>
      </svg>
      <span slot="title">{{ item }}</span>
    </el-menu-item>
    <!-- 我创建的歌单下拉框 -->
    <el-submenu index="5">
      <template slot="title">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="'#icon-gedan' + (1)"></use>
        </svg>
        <span>我创建的歌单</span>
      </template>        
      <el-menu-item-group>
        <el-menu-item index="7" @click="createList()">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tianjia"></use>
      </svg>
      创建歌单
    </el-menu-item>  
        <!-- 此处存放歌单组件 -->
        <el-menu-item :index="'1-' + index" v-for="(item, index) in createPL" :key="index" @click="toMusicList(item)">
          <img :src="`${url}/${item.playlist_coverUrl}`" alt="">
          {{ item.playlist_name}}
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <!-- 我收藏的歌单 -->
    <el-submenu index="6">
      <template slot="title">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="'#icon-gedan' + (2)"></use>
        </svg>
        <span>我收藏的歌单</span>
      </template>
      <el-menu-item-group>
        <!-- 此处存放歌单组件 -->
        <el-menu-item :index="'2-' + index" @click="toMusicList(item)" v-for="(item, index) of collectPLs" :key="index">
          <img :src="url + '/' + item.playlist_coverUrl" alt="">
          {{ item.playlist_name }}
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <!-- 创建歌单 -->

  </el-menu>

</template>

<script>
import { url } from "@/apiUrl"//引入地址
import { mapState } from 'vuex'
export default {
  components: {
  },
  data() {
    return {
      routes: [],//存放路由数组
      songList: {//存放左侧导航栏初始信息
        optionNames: ['音乐馆', "我的收藏", "我喜欢的音乐", "最近播放"],
        songListNames: ["我创建的歌单", "我收藏的歌单"],
        songListIndex: ["5", "6"],
        icons: ["#icon-yinle1", "#icon-shoucang", "#icon-24gf-playlistHeart4", "#icon-zuijinbofang"]
      },
      dialogVisible: false,
      src: `${url}/images/image_2107947967.jpg`,
      url: null
    }
  },
  created: function () {
    this.$data.routes = this.$router.options.routes;//将routes路由数组挂载到data中的自定义数组
    this.url = url
  },
  computed: {
    ...mapState({
      createPL: state => state.createPL,
      collectPLs: state => state.collectPLs
    })
  },
  methods: {
    navigation: function (index) {//编程式导航处理函数
      var local = localStorage['qtUser']//登录拦截
      if (index > 0 && !local) {
        this.$message("请先登录")
      }
      this.$router.push(this.routes[index].path).catch((err) => { });//导航到相应路径
    },
    toMusicList(musicList) {
      console.log("传递的歌单信息", musicList);
      this.$router.push({
        path: '/musicList',
        query: {
          playlist_id: musicList.playlist_id,//传递歌单id
          listDetails: musicList//传递歌单信息
        }
      }).catch((err) => { });//导航到相应路径
    },
    createList(){
      if (localStorage["qtUser"] != undefined) {
        this.$store.commit("createList", true)
      } else {
        this.$message("请先登录")
      }
    },
    getCreatePl() {
      if (localStorage["qtUser"] != undefined) {
        this.$store.commit("getCreatePL")
        this.$store.commit("getCollectPL")
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/common.scss';
.el-menu-vertical-demo{
  background-color: $undercolor;
  z-index:4;
  border-right:none;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.el-menu-item:focus,.el-menu-item:hover {
    outline: none;
    background-color: #9dd4b223;
}
.el-submenu .el-menu-item {
  /* height: 50px; */
  /* line-height: 50px; */
  padding: 0 0 0 1.1rem !important;
  /* min-width: 200px; */
  font-size: 11px;
}

.icon {
  margin-right: 1rem;
}

.el-menu .el-menu-item-group {
  background-color: $undercolor;
}

#leftNav {
  width: $leftNavMargin;
  height: 100%;
  position: fixed;
  overflow-x: hidden;
  box-shadow:0.5px 0 10px 0.5px rgba(0, 0, 0, 0.492) ;
}

// 修改滚动条样式
#leftNav::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}

#leftNav::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

#leftNav::-webkit-scrollbar-thumb {
  background: #dcbdf188;
  border-radius: 10px;
}

#leftNav::-webkit-scrollbar-thumb:hover {
  background: #6b5a6bdd;
}

#leftNav::-webkit-scrollbar-corner {
  background: #179a16;
}

  img {
  margin-right: 1rem;
  width: 33px;
  border-radius: 0.4rem;
}
</style>